<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微博发布系统</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- Include stylesheet -->
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <style>
        #app {
            width: 1200px;
            /* height: 800px; */
            margin: 0 auto;
            border: 2px solid #ccc;

        }
        .publish,.edit{
            width: 1200px;
            
        }
        #container{
            /* height: 520px; */
        }
    </style>

</head>

<body>

    <div id="app">

        
        <div v-show="seen=='save'" class="publish">
            <div id="container">
                <p id="art" v-for="item in list" v-html="item"></p>
            </div>           
            <button @click="edit">编辑</button>
        </div>
        
        
        <div v-show="seen=='edit'" class="edit">
            <div id="editor"></div>
            <button @click="save">保存</button>
        </div>
  

    </div>

    

    <!-- Include the Quill library -->
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

    <!-- Initialize Quill editor -->
    <script>
        var app = new Vue({
            el: "#app",
            data:{
                seen:'edit',
                list:[],
                text:"",
            },
            methods: {
                edit(){
                    this.seen="edit";
                   
                },
                save(){
                    this.seen="save";
                    console.log(quill.root.innerHTML); 
                    this.list.push(this.text);
                    
                },
          
            },
        });


        // 1.通过topbar选项定义topbar
        var toolbarOptions = [
            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
            ['blockquote', 'code-block'],

            [{ 'header': 1 }, { 'header': 2 }],               // custom button values
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
            [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
            [{ 'direction': 'rtl' }],                         // text direction

            [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

            [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
            [{ 'font': [] }],
            [{ 'align': [] }],

            ['clean']                                         // remove formatting button
        ];
        // 2.动态获取输入框中的内容？
        var quill = new Quill('#editor', {
            modules: {
                toolbar: toolbarOptions
            },
            theme: 'snow'
        });

        // 动态获取输入的数据 
        quill.on('text-change', function (delta, oldDelta, source) {
            if (source == 'api') {
                console.log("An API call triggered this change.");
            } else if (source == 'user') {
                console.log("A user action triggered this change.");
                // 3.获取的内容以编辑的格式传入指定的区域
                let html =quill.root.innerHTML;
                app.text=html
                

            }
        });
    </script>

</body>

</html>